<template>
<view style="margin: 0 auto;width: 90%;">
	
	
	<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :circular="false"  :style="{'height':swiperHeight+'px'}" @change="tabChange">
					<swiper-item v-for="(item,index) in questionList">
						  <view class="component">
							  <view>
							  		<text style="font-size: 32rpx;font-weight: bold;">{{index+1}}.{{item.typeName}}</text>
							  	  </view>	
							  	  
							  	  <view>
							  		<rich-text  :nodes="item.question" style="font-size: 40rpx;"></rich-text>
							  	  </view>
							  	  
							  	  <view v-if="item.type==0">
							  		  <!--单选-->
							  		  <view >
							  			  
							  			  <view v-if="item.myAnswer">
							  				    <!--已经回答了就不能再回答了-->
							  					<radio-group @change="radioChange" >
							  						<label class="uni-list-cell answer" >
							  							<view>
							  								<radio value="A" :disabled="true" :checked="item.myAnswer === 'A'" />
							  							</view>
							  							<view>A. {{item.answerA}}</view>
							  						</label>
							  						<label class="uni-list-cell answer" >
							  							<view>
							  								<radio value="B" :disabled="true" :checked="item.myAnswer === 'B'" />
							  							</view>
							  							<view>B. {{item.answerB}}</view>
							  						</label>
							  						<label class="uni-list-cell answer" >
							  							<view>
							  								<radio value="C" :disabled="true" :checked="item.myAnswer === 'C'" />
							  							</view>
							  							<view>C. {{item.answerC}}</view>
							  						</label>
							  						<label class="uni-list-cell answer" >
							  							<view>
							  								<radio value="D" :disabled="true" :checked="item.myAnswer === 'D'" />
							  							</view>
							  							<view>D. {{item.answerD}}</view>
							  						</label>
							  					</radio-group>
							  			  </view>
							  			  <view v-else>
							  				  <radio-group @change="radioChange">
							  				  	<label class="uni-list-cell answer" >
							  				  		<view>
							  				  			<radio value="A" :checked="item.myAnswer === 'A'" />
							  				  		</view>
							  				  		<view>A. {{item.answerA}}</view>
							  				  	</label>
							  				  	<label class="uni-list-cell answer" >
							  				  		<view>
							  				  			<radio value="B" :checked="item.myAnswer === 'B'" />
							  				  		</view>
							  				  		<view>B. {{item.answerB}}</view>
							  				  	</label>
							  				  	<label class="uni-list-cell answer" >
							  				  		<view>
							  				  			<radio value="C" :checked="item.myAnswer === 'C'" />
							  				  		</view>
							  				  		<view>C. {{item.answerC}}</view>
							  				  	</label>
							  				  	<label class="uni-list-cell answer" >
							  				  		<view>
							  				  			<radio value="D" :checked="item.myAnswer === 'D'" />
							  				  		</view>
							  				  		<view>D. {{item.answerD}}</view>
							  				  	</label>
							  				  </radio-group>
							  			  </view>
							  		  			
							  		  </view>
							  
							  		  
							  	  </view>
							  	  
							  
							  
							  <view v-if="item.corrected==0">
							  	<view style="margin-top: 25rpx;font-size: 35rpx;">
							  		<text>正确答案是</text>
							  		<text style="font-weight: bold;color: red;">{{item.answer}}</text>
							  		<text>，您的答案是</text>
							  		<text style="font-weight: bold;color: red;">{{item.myAnswer}}</text>
							  	</view>
							  	
							  	<view v-if="item.analysis">
							  		<view>
							  			<text style="font-size: 35rpx;font-weight: bold;">思路点拨</text>
							  		</view>
							  		<view style="margin-top: 10rpx;">
							  			<text>{{item.analysis}}</text>
							  		</view>
							  	
							  	</view>
							  </view>
						  </view>
					
					</swiper-item>
					
	</swiper>
	
	
	
</view>
</template>

<script>
	export default {
		onLoad(options) {
			console.log('---options----',options.id);
			this.id = options.id;
			this.getQuestion();
		
		},
		data() {
			return {
				id:undefined,
				context:'',
				swiperHeight:'',
				currentQues:{},
				currentIndex:0,
				questionList:[],
			};
		},
		
		methods:{
			swiperTab(){
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(".component").boundingClientRect();
				console.log(query.select(".component"))
				query.exec((res) => {
					let screenHeight = uni.getSystemInfoSync().screenHeight;
					if(screenHeight>res[0][this.currentIndex].height){
						this.swiperHeight = screenHeight;
					}else{
						this.swiperHeight = res[0][this.currentIndex].height;
					}
				})
			},

			async getQuestion(){
					const {data:res} =await uni.$http.post('/st_question/list',{pointId:this.id});
					this.questionList=res.data;
					this.currentQues = this.questionList[0]; 
					this.currentIndex = 0;
					this.$nextTick(function() {
						this.swiperTab();
					});
			},
			
			tabChange(e) {
				const index = e.detail.current;
				this.currentQues=this.questionList[index];
				this.currentIndex = index;
				this.swiperTab();
					
			},
			
			radioChange(evt) {
				let data = this.currentQues;
				data.myAnswer=evt.detail.value;
				this.answerQuestion(data);
			},
				async answerQuestion(data){
						const {data:res} =await uni.$http.post('/st_question/answer',data);
						if(res.data){
							this.questionList[this.currentIndex].myAnswer = res.data.answer;
							this.questionList[this.currentIndex].corrected = res.data.corrected;
								this.$forceUpdate();
						}
				},
				
				
				
				
			
		}
	}
</script>

<style lang="scss">
.uni-list-cell {
		justify-content: flex-start
	}
	.answer{
		padding-left: 2rpx;
        padding-right: 2rpx;
		padding-top: 15rpx;
	}
</style>
